<template>
    <div class="nav">
        <Breadcrumb>
          <BreadcrumbItem>库房</BreadcrumbItem>
          <BreadcrumbItem>库房</BreadcrumbItem>
          <BreadcrumbItem>列表</BreadcrumbItem>
        </Breadcrumb>
  
        <h2 class="primary">库房</h2>
      </div>
      <div class="info">

        <div>
           <vxe-input
           style="width: 280px;"
                v-model="searchName"
                placeholder="请输入库房名称"
              ></vxe-input>
              <vxe-button status="primary">搜索</vxe-button>
        </div>
        <vxe-grid v-bind="gridOptions" >
        
            <template #toolbar_buttons>
            
             
              <vxe-button
                style="
                  width: 78px;
                  background-color: #945635;
                  color: aliceblue;
                  border: none;
                "
                >+ 新增</vxe-button
              >
              <vxe-button
                style="
                  width: 88px;
                  background-color: #f48c72;
                  color: aliceblue;
                  border: none;
                "
                >批量删除</vxe-button
              >
            </template>
         
          </vxe-grid>
        
      </div>
</template>

<script setup>
import { api_get_kfInfo } from '../../../../api/kufang/kufang';
import { ref, reactive, onMounted } from 'vue'

const tabList =ref({})
const getKfInfo = () => {
  api_get_kfInfo()
    .then((res) => {
      tabList.value  = res.data.data.list
    
    })
    .catch((err) => {
    console.log(err);
  })
}
onMounted(() => {
  getKfInfo()
})
const gridOptions = reactive({
  border: true,
  showOverflow: true,
  showFooter: true,

  columnConfig: {
    resizable: true
  },
  pagerConfig: {
    enabled: true,
    pageSize: 20,
    perfect: true
  },
  toolbarConfig: {
    zoom: true,
    custom: true,
    slots: {
      // 自定义插槽模板
      buttons: 'toolbar_buttons'
    }
  },
  
    columns: [
     { type: 'checkbox', width: 70 ,align: "center",},
    { field: 'id', title: '序号', width: 70 ,align: "center"},
    { field: 'store_room_name', title: '名称' , width: 236},
    { field: 'store_room_addr', title: '地址' },
    { field: 'store_room_area', title: '面积' , width: 120,align: "center"},
    { field: 'principal_name', title: '负责人', width: 100 ,align: "center"},
    { field: 'manager_name', title: '管理人' , width: 120,align: "center"},
    { field: 'comment', title: '备注' , width: 237},
    { field: 'caozuo', title: '操作' , width: 200,align: "center"},
  ],
  data:tabList
 
})


</script>

<style scoped>
.nav {
  height: 80px;
  border-bottom: 1px solid #c4c2c2;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 10px;
  padding-left: 15px;
  }
  .primary {
    color: rgb(148, 86, 53);
  }

  .info {
    border: 15px solid#f5f7f9;
    padding: 15px;
    background-color: #fff;
    height: 100vh;
    border-radius: 20px;
  }
  h2 {
    font-weight: normal;
    font-size: 20px;
  }
</style>